<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>赵亮的菜馆</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
          [v-cloak]{
            display: none;
          }
        </style>
    </head>
    <body>
		<div id="myapp">
		
		<div text-align:center>
			<nav
				class="btn btn-outline-light btn-radius btn-lg , col-sm-12 my-auto text-center ,p-2 mb-2 bg-info text-white" >赵亮的菜馆
			</nav>
		</div>

        <!--components-->
        <section class="my-5 pt-5">
            <div class="container">
                <!-- Tables  -->
                <div class="row mb-5" id="tables">
                    <div class="col-sm-12">
					<button type="button" class="btn btn-info" v-on:click="show_add()">管理</button>
                        <div class="mt-3 mb-5">
                            <h3>菜单</h3>
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>菜品</th>
                                        <th>单价</th>
                                        <th>描述</th>
										<th>操作</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th>
										<!--双向绑定 -->
											<div v-show="add_show_flag==true" v-cloak>
												总价: ￥{{total_price()}}
											</div>
										</th>
										<th>
											<div v-show="add_show_flag==true">
												<button type="button" class="btn btn-info" v-on:click="order_commit()">下单</button>
											</div>
										</th>
                                    </tr>
                                </tfoot>
                                <tbody>
								<tr v-for="dish in dishes" v-cloak>
										<td>{{dish.name}}</td>
										<td>￥{{dish.price / 100}}</td>
										<td>{{dish.info}}</td>
										<td>
											<div v-show="add_show_flag==true">
												<label class="custom-control custom-checkbox">
													<!--对dish.select_flag进行双向绑定，若被选中，则该dish.select_flag为true,否则为false-->
													<input type="checkbox" class="custom-control-input" v-model="dish.selected_flag">
													<span class="custom-control-indicator"></span>								
												</label>
											</div>
											<div v-show="add_show_flag==false">
												<button title="修改菜品" type="button" class="btn btn-warning" v-on:click="mod_dish(dish.id)">修改</button>
												<button title="删除菜品" type="button" class="btn btn-warning" v-on:click="del_dish(dish.id)">删除</button>
											</div>
										</td>
									</tr>
									<tr v-show="add_show_flag==false">
										<td>
											<input type="text" id="accountId1" class="from-control" v-model="add_dish.name">
										</td>
										<td>
											<input type="text" id="accountId2" class="from-control" v-model="add_dish.price">
										</td>
										<td>
											<input type="text" id="accountId3" class="from-control" v-model="add_dish.info">
										</td>
										
										<td>
											<button title="新增菜品" type="submit" class="btn btn-info"  v-on:click="dish_commit()">提交</button>
										</td>
									</tr>
									
                                </tbody>
                            </table>
                        </div>
                    </div>
				</div>
			</div>

		
        <!--footer-->
        <section class="py-5 bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                        <!-- <h3>Upgrade to Pro Version</h3>
                        <p class="pt-2">
                            We are working on <b>Charcoal Pro</b> which will be released soon. The pro version 
                            will have a lot more components, sections, icons, plugins and example pages. 
                            Join the waiting list to get notified when we release it (plus discount code).
                        </p>
                        <a class="btn btn-warning" href="https://wireddots.com/newsletter">Join Waiting List</a>
                        <hr class="my-5"/> -->
                        <p class="pt-2 text-muted">
                            &copy; Author by Zhang
                        </p>
                    </div>
                </div>
            </div>
        </section>
	</div>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
		//Vue 而不是 vue
			var app = new Vue({
			//是EL 不是 E1
				el: '#myapp', //选择器名称
				data: {
					add_show_flag : true,	
					add_dish:{
						name:null,
						price:null,
						info:null
					},
					dishes:[]
				},
				methods: {
					//true为用户模式，false为管理员模式
					//可以新建一个表单-管理员表单，{name varchar(128), password varchar(128) ...手机号...邮箱...},后台新建一个hpp文件对该表单进行管理(添加账号密码，删除账号密码（
//可设置一个更高权限的账户），比较账户密码是否正确，根据手机号修改密码等操作),在服务器内建立响应请求的处理函数，利用vue:js在前端让用户输入账户密码，向服务器发送请求，调用
//数据库控制管理员信息
					show_add : function(){
						if(this.add_show_flag == false)
							this.add_show_flag = true;
						else
							this.add_show_flag = false;
					},
					total_price : function(){
						var total = 0;
						for(let i = 0; i < this.dishes.length; i++){
							if(this.dishes[i].selected_flag == true){
								total += this.dishes[i].price;
							}
						}
						return total / 100;
					},
					get_alldishes : function(){
						$.ajax({
							url:"/dish",
							type:"get",
							context:this,
							success:function(result){
								this.dishes = result;
							}
						});
					},
					order_commit : function(){
						  var commit_order = {dishes:[]};//这里的dishes指的是order里的"dishes"信息，后面for里面的dishes指的是菜单JSON对象
						//遍历所有菜单，如果该菜单被选中，则将该菜单id添加到
						for(let i = 0; i < this.dishes.length; i++){
							if(this.dishes[i].selected_flag == true){
								commit_order.dishes.push(this.dishes[i].id);
							}
						}
						$.ajax({
							url:"/order",
							type:"post",
							context:this,
							data: JSON.stringify(commit_order),	//正文--将JSON对象序列化
							success: function(result){//result就是响应接口
								alert("下单成功");//提示信息
							}
						});
					},
          mod_dish : function(id){
						if(this.add_dish.name.length == 0){
							alert("请输入菜品名称");
							return;
						}
						if(this.add_dish.prive <= 0){
							alert("请输入菜品单价");
							return;
						}
						if(this.add_dish.info.length == 0){
							alert("请输入菜品描述");
							return;
						}
            $.ajax({
              url:"/dish/" + id,
              type:"put",
              context:this,
              success:function(result){
                alert("修改成功");
                this.get_alldishes();
              }
            });
          },
					del_dish: function(id){
						$.ajax({
							url:"/dish/" + id,//拼接一个资源路径
							type:"delete",
							context:this,
							//result是响应信息
							success:function(result){
							//删除后立即更新
								this.get_alldishes();
							}
						});
					},
					dish_commit: function(){
						if(this.add_dish.name.length == 0){
							alert("请输入菜品名称");
							return;
						}
						if(this.add_dish.prive <= 0){
							alert("请输入菜品单价");
							return;
						}
						if(this.add_dish.info.length == 0){
							alert("请输入菜品描述");
							return;
						}
						this.add_dish.price *= 100;
						$.ajax({
							url:"/dish",
							type:"post",
							context:this,
							data: JSON.stringify(this.add_dish),
							success:function(result){
								this.get_alldishes();//新增菜品后立即刷新菜单
								//将add_dish的信息置空，因为双向绑定，使得输入框为空
								this.add_dish.name = null;
								this.add_dish.price = null;
								this.add_dish.info = null;
							}
						});
					}
				}				
			});
			app.get_alldishes();
		</script>
    </body>
</html>
